<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="60%"
    :append-to-body="true"
    :show-close="false"
  >
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="素材库" name="first">
        <el-radio-group
          v-model="collect"
          size="mini"
          style="margin-bottom: 30px"
          @change="statusChangeAction"
        >
          <el-radio-button label="false">全部</el-radio-button>
          <el-radio-button label="true">收藏</el-radio-button>
        </el-radio-group>

        <el-row :gutter="10">
          <el-col
            :xs="12"
            :sm="6"
            :md="6"
            :lg="4"
            v-for="item in images"
            :key="item.id"
            class="col-img"
          >
            <div @click="chooseImgAction(item)">
              <el-image
                style="width: 100%; height: 100px"
                :src="item.url"
                fit="cover"
              ></el-image>
              <div class="selected-img">
                <img
                  width="80"
                  height="80"
                  src="./selected.png"
                  alt=""
                  fit="cover"
                  v-if="chooseImgUrls.indexOf(item.url) !== -1"
                />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalCount"
          :page-size="pageSize"
          :current-page.sync="page"
          @current-change="onCurrentChange"
          :disabled="pagenationDisabled"
        >
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label="上传图片" name="second">
        <label for="file">
          <div class="cover-container">
            <img :src="priviewImg" alt="" />
          </div>
        </label>
        <input
          type="file"
          ref="file"
          name=""
          id="file"
          hidden
          @change="onFileChange"
        />
      </el-tab-pane>
    </el-tabs>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="confirmLoading" @click="onConfirm"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { uploadImage, getImages } from '@/api/image'
export default {
  name: 'ChooseImg',
  data () {
    return {
      dialogVisible: false,
      activeName: 'first',
      collect: false,
      totalCount: 0,
      pageSize: 10,
      page: 1,
      pagenationDisabled: false,
      images: [],
      priviewImg: require('./pic_bg.png'),

      chooseImgUrls: [],
      confirmLoading: false
    }
  },
  props: {
    maxCount: {
      type: Number,
      default: 1
    }
  },
  components: {},
  mounted () {
    this.loadImages()
  },
  methods: {
    open () {
      this.dialogVisible = true
    },
    close () {
      this.dialogVisible = false
    },

    loadImages () {
      const params = {
        page: this.page,
        per_page: 10,
        collect: this.collect
      }
      getImages(params)
        .then((res) => {
          const { results } = res.data.data
          results.forEach((item) => {
            item.colLoading = false
            item.delLoading = false
          })
          this.images = results
          this.totalCount = res.data.data.total_count
        })
        .catch((e) => {})
    },
    statusChangeAction (e) {
      this.page = 1
      this.loadImages()
    },

    showCoverDialog () {
      this.dialogVisible = true
    },
    onConfirm () {
      if (this.activeName === 'second') {
        const file = this.$refs.file.files[0]
        if (!file) {
          this.$message({
            message: '请选择文件'
          })
        }
        this.confirmLoading = true
        const fd = new FormData()
        fd.append('image', file)
        uploadImage(fd)
          .then((res) => {
            this.dialogVisible = false
            this.chooseImgUrls = []
            this.coverImg = res.data.data.url
            this.chooseImgUrls.push(this.coverImg)
            this.confirmLoading = false
            this.$emit('confirm', this.chooseImgUrls)
          })
          .catch((e) => {})
      } else {
        this.$emit('confirm', this.chooseImgUrls)
        this.dialogVisible = false
      }
    },

    onCurrentChange (e) {
      this.loadImages()
    },
    // 选择文件改变
    onFileChange (e) {
      if (this.$refs.file.files.length) {
        const file = this.$refs.file.files[0]
        const blob = window.URL.createObjectURL(file)
        this.priviewImg = blob
      }
    },
    chooseImgAction (item) {
      const index = this.chooseImgUrls.findIndex((v) => v === item.url)
      if (index !== -1) {
        this.chooseImgUrls.splice(index, 1)
      } else {
        if (this.chooseImgUrls.length < this.maxCount) {
          this.chooseImgUrls.push(item.url)
        } else {
          this.$message({
            message: '超过可选择最大图片数量',
            type: 'warning'
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cover-container {
  width: 150px;
  height: 150px;
  margin: 10px;
  border: 1px solid #eee;
  img {
    width: 100%;
    height: 100%;
  }
}

.col-img {
  position: relative;
  .selected-img {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
</style>
